/*
  学习目标：兄弟通信-状态提升:
  需求: 让老婆花点老公的钱
  步骤：
     1. 
     2. 
     3. 
*/

import React, { Component } from 'react';
import Husband from './components/Husband';
import Wife from './components/Wife';

export default class App extends Component {
  // 1. 把Husband的state, 提升到父组件中去
  state = {
    money: 0,
  };

  // 2. 把赚钱的方法也提升到父组件中
  handleMakeMoney = () => {
    this.setState({ money: this.state.money + 1000 });
  };

  // 5. 定义花钱的函数
  handleCostMoney = () => {
    // 8. 完成花钱的逻辑
    this.setState({ money: this.state.money - 2000 });
  };

  render() {
    return (
      <div>
        <h1 style={{ textAlign: 'center' }}>家庭存款：{this.state.money}</h1>
        <Husband
          // 3. 给子组件传递赚钱的回调函数
          handleMakeMoney={this.handleMakeMoney}
        ></Husband>
        <hr />
        <Wife
          // 6. 传给子组件花钱的回调
          handleCostMoney={this.handleCostMoney}
        ></Wife>
      </div>
    );
  }
}
